<template>
  <div class="search-bar">
    <i class="icon-search"></i>
    <input type = "text"
           class="input-control"
           placeholder="搜索"
           v-model.lazy.trim="key">
    <i :class="deleteCls" @click="clearTxt"></i>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
    export default {
        name: "SearchBar",
        data(){
            return {
                key: ''
            }
        },
        methods: {
            inputChange(newKey){
                this.$emit('inputchange',newKey)
            },
            clearTxt(){
                this.key = ''
            }
        },
        computed: {
            ...mapGetters('search',[
                'query'
            ]),
            deleteCls(){
                return this.key ? 'icon-delete' : ''
            }
        },
        watch: {
            key(newVal){
                this.inputChange(newVal)
            },
            query(newVal){
                this.key = newVal
            }
        },
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
.search-bar
  position relative
  height 100%
  .icon-search
    position absolute
    top 50%
    transform translateY(-50%)
    font-size 2.2rem
    left 5px
    color $color-text-ll
  .input-control
    box-sizing border-box
    border-radius 15px
    padding 5px 10px 5px 40px
    width 100%
    height 100%
    font-size $font-size-medium-x
    color $color-text-l
    background $color-highlight-background
    &:focus
     outline-style none


  .icon-delete
    position absolute
    right 1rem
    top 50%
    transform translateY(-50%)
    font-size 1rem
    color $color-sub-theme
</style>
